<template>
<div>
    <Settingheader :titletext='settingtitle' :backpage="backpage"></Settingheader>
    <div class="bindphone">
        <h3>绑定手机号，获得更周全的服务</h3>
        <div class="phone_box">
            <label for="phonenum">手机号</label>
            <input id="phonenum" type="text" v-model="phonenum">
        </div>
        <div class="yzm_box">
            <label for="yzm">验证码</label>
            <input id="yzm" type="text" v-model="yzm">
            <span>获取验证码</span>
        </div>
        <div class="submit">
            <!-- <button>提交</button> -->
            <linebtn></linebtn>
        </div>
        <div class="thirdparty">
            <p>绑定第三方</p>
            <thirdparty></thirdparty>
            <!-- <div class="imgbox">
                <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_bangding_02.png" alt="qq">
                <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_bangding_03.png" alt="微信">
                <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_bangding_04.png" alt="微博">
            </div> -->
        </div>
    </div>
</div>
</template>
<script>
import Settingheader from "../../components/settingheader";
import Linebtn from '../../components/linebtn';
import Thirdparty from '../../components/thirdparty';
export default {
    name:'bindphone',
    data(){
        return {
            settingtitle:'绑定',
            backpage:'setting',
            phonenum:'',
            yzm:''
        }  
    },
    components :{
        Settingheader,
        Linebtn,
        Thirdparty
    }
}
</script>
<style lang="less" scoped>
    .bindphone {
        width: 570/75rem;
        margin: 0 auto;
        h3 {
            font-size: 28/75rem;
            color: #333;
            text-align: center;
            margin-top: 114/75rem;
            margin-bottom: 80/75rem;
        }
        .phone_box {
            font-size: 30/75rem;
            color: #333;
            border-bottom: 1px solid #a6a6a6;
            padding-bottom: 10/75rem;
            margin-bottom: 70/75rem;
            overflow: hidden;
        }
        .yzm_box {
            &:extend(.bindphone .phone_box);
            color: #808080;
            span {
                float: right;
                border: 1px solid #808080;
                display: inline-block;
                height: 36/75rem;
                border-radius: 18/75rem;
                line-height: 36/75rem;
                padding: 0 10/64rem;
            }
        }
        label {
            float: left;
            margin-right: 20px;
        }
        input {
            height: 30/75rem;
            width: 240/75rem;
            float: left;
            border: none;
            background: transparent;
            font-size: 30/75rem;
            outline: none;
            padding: 0
        }
        .submit {
            button {
                width: 100%;
                height: 80/75rem;
                background: #ff406f;
                border-radius: 40/75rem;
                border: none;
                font-size: 38/75rem;
                color: #fff;
                box-shadow: 0 20px 30px 3px #ff89a6;
            }
            margin-bottom: 145/75rem;
        }
        .thirdparty {
            font-size: 24/75rem;
            color: #808080;
            text-align: center;
            .imgbox {
                overflow: hidden;
                margin-right: -110/75rem;
                img {
                margin-top: 64/75rem;
                margin-right: 110/75rem;
            }
            }
        }
    }
</style>

